/*Misc*/
html, body {
	width: 100%;
	height: 100%;
	padding: 0px;
	margin: 0px;	
}
html {
    border-color: #cccccc; /* defined Root border-color: Off-white */
    overflow: hidden;
    /* preventing overflows like dimmed background-layer to generate scrollbars
		Scrollbars are getting used on the individual containers like #output instead anyways
     */
    font-family: arial, sans-serif;
    font-size: 1rem; /* defined Root font-size */    
    color: #cccccc; /* defined Root font-color: Off-white */
    line-height: 1.5em;
}
body{
    display: flex;
    /* Makes sure #output always fills the rest of the available space */
}
*{
	box-sizing: border-box;
	/*when specifying dimensions, it takes padding and borders into account*/
}
a, a:visited {
	text-decoration: none;
	color:#509cea;
}
.closeButton {
	top:15px;
	left: 340px;
	position: absolute;
	font-size: 50px;
  	border: 5px solid white;
  	border-radius: 20px;
	color:white;
	cursor: pointer;
	
}
.openButton {
	top:15px;
	left: 20px;
	position: absolute;
	font-size: 50px;
	visibility: hidden;
  	border: 5px solid white;
  	border-radius: 20px;
	color:white;
	cursor: pointer;
}
.ghost {
	position: absolute;
	cursor: pointer;
}
.loader {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}
hr {
	border: 2px dashed white;
	margin-bottom: 45px; 
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/****Scroll bar****/
/* width */
::-webkit-scrollbar {
  width: 5px;
}
/* Track */
::-webkit-scrollbar-track {
  background: #333333; 
}
 /* Handle */
::-webkit-scrollbar-thumb {
  background: #FFFFFF; 
  border-radius:3px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #DDDDDD; 
}

/**** Menu ****/
div#menu {
    width: 400px;
    height: 100%;
    flex:none;
    border-right: 2px solid;
  	background-color: #111111;
	text-align: center;
	overflow-y: auto; /*only adds a scrollbar, when necessary*/
	overflow-x: hidden;
	/*resize: horizontal;  probably better to code the resizing of this container via JS. Something for later. */
}
p#title {
    font-size: 1.875em;
    margin-bottom: 15px;
}
p#author {
    font-size: 0.75em;
	cursor: pointer;
}

.flexbox{
    display: flex;
    flex-wrap: wrap;
}
.flexbox>*{
	/*Only really used for the menu to ensure 2 items per row*/
    width: 42%;
    box-sizing: border-box;
    margin: 15px;
}
.playerImage {
	display: block;
    margin: auto;
  	border: 3px solid white;
  	border-radius: 5px;
	   object-fit: cover;
}

/**** Canvas ****/
.wrapper{
    background: none; /*To ensure WrapperBG shows, in case browser-native forces white background as default*/
    width: 100%;
	height: 100%;
	overflow-y: auto; /*only shows a scroll-bar, if necessary*/
	overflow-x: hidden;
}
div#output {
    padding: 60px;
}
div#wrapperBG {
	/*Box covering entire canvas, used to add background-image via JS*/
    height: calc(100% + 20px);
    width: calc(100% + 20px);
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: cover;
    filter: blur(20px);
    z-index: -2;
}
div#wrapperBG::after {
	/*dims the background */
    background: rgba(0,0,0,0.75);
    content: "";
    position: absolute;
    height: calc(100% + 20px);
    width: calc(100% + 20px);
    z-index: -1;
}
.backgroundPicture{
		display: block;
		margin: auto;
		width: 100%;
		max-height: 70vh;
		padding: 20px, 1px;
		border: 3px solid white;
        border-radius: 15px;
}
.playerRoom {
	position: relative;
	width: 90%;
	margin: auto;
}
.pictureButton {
	display: block;
	position: absolute;
	background-color: black;
	opacity: .5;
	text-align: center;
	cursor: pointer;
  	border: 3px solid white;
  	border-radius: 5px;
	padding-top: 20px;
	padding-bottom: 20px;
}
.pictureButton:hover {
	display: block;
	position: absolute;
	background-color: black;
	opacity: .8;
	text-align: center;
	cursor: pointer;
  	border: 4px solid white;
  	border-radius: 5px;
	padding-top: 20px;
	padding-bottom: 20px;
}
img.bigPicture {
	display: block;
    max-height: 90vh;
    max-width: 100%;
    margin: auto;
    border: 5px solid #85bbc3;
    border-radius: 30px;
}
.medPicture {
	display: block;
    margin: auto;
    max-height: 500px;
  	padding: 20px, 1px;
  	border: 3px solid white;
  	border-radius: 5px;
}

/**** Text ****/
h1,h2,h3,h4,h5,h6,p{
	/*clear any user style agent defintions*/
	margin:0;
	padding:0;
}
h1 {
    font-size: 2.5rem;
}
h2 {
    font-size: 2rem;
}
h3 {
    font-size: 1.5rem;
}
h3 {
    font-size: 1.25rem;
}
.centeredText {
	text-align:center;
	margin-left: auto;
	margin-right: auto;
}
.tinyText {
	color: #BBBBBB;
	text-align:center;
	margin-left: auto;
	margin-right: auto;
	width: 400px;
	font-size: 70%;
}
p{margin: 15px 0;}

/**** Dialogue ****/
.textBox {
	position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    background-color: rgba(0,0,0,0.5);
    border-bottom: 5px solid;
	/*border-color: var(--character-color);*/
    margin: 15px 0;
    padding: 15px;
    border-radius: 15px;
    width: 100%;
	overflow: hidden;
	box-shadow: inset 0 0 20px #000;
}
.textBoxContent {
	/*added so in the case of ever having so much dialog that it would extend over the picture, it aligns neatly at the right to the picture as demosntrated in example1.jpg.*/
}
img.textThumb {
    height: 150px;
    width: 150px;
    border-radius: 15px;
    margin-right: 30px;
    /*box-shadow: -5px 5px var( --character-color);*/
    flex: none;
}
/* Textbox interactions */
.textBox p.switch {
    color: #5fe6ec;
	cursor: pointer;
}
.textBox p.switch::before {
    content: '\027A4';
    padding-right: 5px;
	cursor: pointer;
}
/* text emphasis */
.textBox b {
    color: hsla(48, 69%, 75%, 1);
}
.textName {
    font-size: 1.25em;
	margin: 0px;
	padding: 0px;
	font-weight: bold;
}
p.rawText {
    margin-bottom: 45px;
    font-style: italic;
}
.specialText {
    color: #1ce01c;
    font-weight: bold;
    margin-bottom: 45px;
    text-align: center;
}

/****Status colors****/
p.status{
	font-size: 0.875em;
    margin-bottom: 15px;
}
.Love{
	color: #ff0000;
    font-weight: 600;
}
.Trusting{
    color: #ffeb00;
}
.Friendly{
    color: #59ce10;
}
.Relaxed{
    color: #6b91bf;
}
.Wary{
	color: #e46b31;
}
.unkown{
    color: #a7a7a7;
}

/*regular button*/
.button, .pictureButton, .choiceText, .shopItem, .logbookSwitch{
    background: rgba(0,0,0,0.75);
    padding: 15px;
    margin: 15px;
    border: none;
    border-bottom: 3px solid;
    border-radius: 5px;
    transition: 0.25s;
    text-align: center;
	cursor: pointer;
}
.button:hover, .pictureButton:hover, .choiceText:hover, .logbookSwitch:hover{
    background: rgba(50,50,50,0.75);
    color: #ffffff;
        border: none;
    border-bottom: 3px solid #FFFFFF;
}
.pictureButton, .choiceText{
	font-size:1.25rem;
	font-weight: bold;
    display: block;
    width: fit-content;
    margin: 15px auto;
}
#restartButton {
    color: #FF0000;
    border-color:#FF0000;
    margin: 0 15px;
}
.pictureButton,.pictureButton:hover {
    padding: 15px;
    opacity: 1;
    border: 0;
    border-bottom: 3px solid #FFFFFF;
}
.playerRoom {
    width: 100%;
    margin-bottom:60px;
}


/*Windows*/
.windowLeft {
	height: 80%;
	width: 30%;
	float:left;
	overflow: auto;
}
.windowRight {
	height: 80%;
	width: 70%;
	float:right;
	overflow: auto;
}
.popup{
	position: absolute;
	top: 50%;
    left: 50%;
	width: 80vw;
	height: 80vh;
    transform: translate(-50%, -50%);
    z-index: 1;
    overflow: visible;
}
.popup::after {
    content: "";
    position: fixed;
	width: 80vw;
	height: 80vh;
    background: rgba(0,0,0,0.5);
    z-index: -1;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.windowTitle {
    width: 100%;
    text-align: center;
    border-bottom: 3px solid white;
    cursor: pointer;
    border-radius: 5px;
    background: rgba(0,0,0,0.5);
    display: block;
    line-height: 2.5;
}
.windowBackdrop {
	background: rgba(25,25,25,0.85);
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100vw;
}

/*Inventory Menu*/
.item {
    background-color: #333333;
    padding: 15px 30px;
    border-radius: 5px;
}
.itemName {
	float: left;
    font-size: 1.25rem;
}
.itemImage {
    height: 69px;
    width: 69px;
    border: 3px solid;
    border-radius: 5px;
	float: right;
}
.itemQuantity {
}

/*Shop*/
.shopItem {
	cursor: pointer;
	position: block;
	width: 100%;
	background-color: #333333;
	overflow: auto;
    height: unset;
	display: flex;	
    align-items: center;
}
.shopName {
	pointer-events: none;
	width: 200px;
	float: left;
	margin-left: 15px;
	color: white;
	left: 30%;
	font-size: 22px;
    flex: 3 1 auto;
}
.shopDesc {
	pointer-events: none;
	float: left;
	margin-left: 15px;
	color: white;
	padding-top: -10px;
	width: 40%;
	left: 40%;
	font-size: 16px;
	flex: 5 1 auto;
}
.shopPrice {
	pointer-events: none;
	float: left;
	margin-left: 15px;
	color: white;
	left: 90%;
	width: 5%;
	font-size: 22px;
    flex: 2 1 auto;
}
.shopImage {
	pointer-events: none;
	float: left;
	height: 69px;
	width: 69px;
  	border: 3px solid white;
  	border-radius: 5px;
    float: right;
    margin-right: 15px;
}
.shopItem>* {
    margin: 0 15px;
}

/**** Logbook ****/
div.popup, .save {
    display: flex;
    flex-wrap: wrap;
	background-color: rgba(0,0,0,0.75);
  	border: 3px solid;
  	border-radius: 5px;
	padding: 0px;
	overflow: hidden;
}
div.inventory {
    display: grid;
}
.lb_Name{
color:var(--character-color);
}
.logbookRight {
	left:20%;
	height: 80%;
	width: 80%;
    left: unset;
    padding: 15px;
    overflow-y: auto;
    overflow-x: hidden;
}
.logbookLeft {
	height: 80%;
	width: 20%;
    top: unset;
    padding: 0;
   overflow-y: scroll;
    overflow-x: hidden;
}
img#selfImage {
  	border: 2px solid;
  	border-radius: 5px;
	float: right;
    max-width: 100%;
	margin: 0 30px;
    max-height: 100%;
}
.selfSwitch {
	display: inline;
	cursor: pointer;
}
.selfSwitch:hover {
	display: inline;
	cursor: pointer;
}

/****Save menu****/
div#save {
    flex-flow: column;
}
.saveButton, .deleteButton, .loadButton, .saveFileButton, .loadFileButton {
    color: #ffffff; 
    padding: 15px; 
    margin-left: 15px; 
    font-size: 1rem; 
    text-align: center;
    width: 120px;
    border: none; 
    border-bottom: 3px solid #ffffff;
    border-radius: 5px; 
   	cursor: pointer; 

}
.saveSlot {
padding: 5px 0;
    height: unset;
    display: flex;
    margin: 15px 0;
    position: relative;
    background-color: rgba(255,255,255,0.25);
    flex-direction: row-reverse;
    justify-content: flex-end;
    padding-left: 105px;
    border-radius: 5px;
}
.saveDate {
    flex: 5 1;
	font-size: 22px;
}
.saveList {
display: flex;
    flex-direction: column;
    overflow-y: scroll;
    width: 100%;
	height: 80%;
	word-wrap: break-word;
}
.deleteButton{
	color:#FF0000;
	border-color:#FF0000;
}
.saveName, .loadButton, .saveButton, .deleteButton, .loadFileButton, .saveFileButton {
    position: unset;
    flex: 1 1 auto;
    max-width: fit-content;
    max-height: fit-content;
    margin: 15px;

}
.saveName {
position: absolute;
    left: 30px;
    width: 75px;
    margin: auto;
    display: block;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.25rem;
}

/***Phone***/
.phoneTextBox {
	position: relative;
	display: block;
	width: 98%;
  	min-height: 92px;
	padding: 5px;
	overflow: hidden;
  	background-color: #111122;
  	border: 5px solid white;
  	border-radius: 5px;
}
.phoneTextBox p {
	margin: 0px;
	padding: 0px;
}
.phoneTextThumb {
	position: relative;
  	display: block;
    margin: auto;
  	padding: 1px;
 	height: 100px;
	width: 100px;
  	float: left;
	overflow: hidden;
  	margin: 0px 10px 0px 0px;
  	border: 3px solid white;
  	border-radius: 5px;
}
.phoneTextName {
	color: white;
	margin: 0px;
	padding: 0px;
	font-weight: bold;
}
.phonePicture {
    display: block;
    margin: auto;
    max-height: 100%;
    max-width: 100%;
      border: 3px solid;
      border-radius: 5px;
}

/*** Mobile Ver Stuff ***/
/*Footer Hiding*/ /*Comment this out in mobile ver*/
.footer { 
	height: 0%;
	overflow: hidden;
}
.footer .switch {
	font-size: 300%;
	height: 100px;
	width: 33%;
	margin: auto;
	margin-top: 50px;
	text-align: center;
	box-sizing: border-box;
	float: left;
  	border: 3px solid white;
  	border-radius: 5px;
}
/*Other*/ /*Comment this out in dekstop ver*/
/*
.footerButton {
	height: 10vh;
	text-align: center;
	box-sizing: border-box;
	float: left;
  	border: 3px solid white;
  	border-radius: 5px;
    background: rgba(0,0,0,0.75);
    margin: 15px;
    border: none;
    border-bottom: 3px solid grey;
    border-radius: 5px;
    transition: 0.25s;
    text-align: center;
	cursor: pointer;
}
.footerButton:hover{
    background: rgba(50,50,50,0.75);
    color: #ffffff;
      border: none;
    border-bottom: 3px solid #FFFFFF;
}
img.bigPicture {
    max-height: 60vh;
    max-width: 90%;
}
div#menu {
    width: 0px;
    overflow: hidden;
    border-right: 0px;
}
div#wrapperBG {
    height: calc(100% + 0px);
    width: calc(100% + 0px);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-repeat: no-repeat;
    background-size: cover;
    filter: blur(10px);
    z-index: -2;
}
div#wrapperBG::after {
    background: rgba(0,0,0,0.75);
    content: "";
    position: absolute;
    height: calc(100% + 0px);
    width: calc(100% + 0px);
    z-index: -1;
}
.pictureButton, .choiceText{
	font-size: 17px;
	font-weight: bold;
    display: block;
    width: fit-content;
    margin: 2px;
}
.choiceText {
	width: 80%;
	margin: auto;
	padding-top: 20px;
	padding-bottom: 20px;
}
.pictureButton,.pictureButton:hover {
    padding: 2px;
	min-height: 10vh;
    opacity: 1;
    border: 0;
    border-bottom: 3px solid #FFFFFF;
}
.playerRoom {
	height: 70vh; 
    width: 90%;
	margin: auto;
    margin-bottom:30px;
}
.button, .choiceText, .shopItem, .logbookSwitch{
	margin-bottom: 15px;
}
.flexbox>*{
    width: 30%;
    margin: auto;
	margin-top: 30px;
}
#restartButton {
    color: #FF0000;
    border-color:#FF0000;
    margin: auto;
    margin-top: 30px;
}
div#output {
	padding: 5px;
}
*/

/*Lobotomy Schema*/
/*Lobotomy Schema*/
p.lobotomyText {
	margin: 30px 0px;
	font-size: 1.3em;
	font-family: railway, times new roman, sans-serif;
	font-style: normal;
}
.textBoxLobotomy {
	position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    background-color: rgba(0,0,0,0.5);
	border: solid 5px;
    margin: 15px 0;
    padding: 0px;
    width: 100%;
	overflow: hidden;
	-moz-transform: skew(-5deg, 0deg);
	-webkit-transform: skew(-5deg, 0deg);
	-o-transform: skew(-5deg, 0deg);
	-ms-transform: skew(-5deg, 0deg);
	transform: skew(-5deg, 0deg);
}
.textNameLobotomy {
    font-size: 1.5em;
	font-weight: bold;
    text-align: center;
	font-family: norwester, times new roman, sans-serif;
	-moz-transform: skew(5deg, 0deg);
	-webkit-transform: skew(5deg, 0deg);
	-o-transform: skew(5deg, 0deg);
	-ms-transform: skew(5deg, 0deg);
	transform: skew(5deg, 0deg);
	margin-bottom: 0px;
	color: black;
}
img.textThumbLobotomy {
    height: 135px;
    width: 135px;
    /*box-shadow: -5px 5px var( --character-color);*/
    flex: none;
	-moz-transform: scale(0.9) skew(5deg, 0deg);
	-webkit-transform: scale(0.9) skew(5deg, 0deg);
	-o-transform: scale(0.9) skew(5deg, 0deg);
	-ms-transform: scale(0.9) skew(5deg, 0deg);
	transform: scale(0.9) skew(5deg, 0deg);
	margin-top: -1px;
}
.textBoxContentLobotomy {
	font-size: 1.4em;
	font-family: railway, times new roman, sans-serif;
	font-style: normal;
	-moz-transform: skew(5deg, 0deg);
	-webkit-transform: skew(5deg, 0deg);
	-o-transform: skew(5deg, 0deg);
	-ms-transform: skew(5deg, 0deg);
	transform: skew(5deg, 0deg);
}
.lobotomyThumb {
    display: inline-block;
    width: 160px;
	margin-right: 40px;
	margin-left: 30px;
}
.lobotomyThumbBorder {
    height: 127px;
    width: 135px;
	background-color: #000000;
    margin-right: 30px;
    margin-left: 10px;
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}
.choiceTextLobotomy {
	padding: 0px;
	margin: 0px;
	font-family: railway, times new roman, sans-serif;
	font-size: 1.3em;
	font-weight: normal;
}
.choiceTextLobotomy:hover{
}
.choiceFrameLobotomy{
    background: rgba(0,0,0,0.75);
    padding: 15px;
    margin: 15px;
    transition: 0.25s;
    text-align: center;
	cursor: pointer;
	font-size:1.25rem;
	font-weight: bold;
    display: block;
    width: fit-content;
    max-width: 30vw;
    margin: 15px auto;
	border: solid 5px;
}

.choiceFrameLobotomy:hover{
    background: rgba(50,50,50,0.75);
    color: #ffffff;
	border-color: rgba(50,50,50,0.75);
}

.textBoxLobotomy p.switch {
    color: #5fe6ec;
	cursor: pointer;
}
.textBoxLobotomy p.switch::before {
    content: '\027A4';
    padding-right: 5px;
	cursor: pointer;
}

/*Persona Schema*/
.textBoxPersona {
	position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin: 15px 0;
    padding: 0px;
    width: 100%;
}
img.textThumbPersona {
    height: 160px;
    width: 160px;
    /*box-shadow: -5px 5px var( --character-color);*/
    flex: none;
}
.textBoxContentPersona {
	font-size: 1.4em;
	font-family: railway, times new roman, sans-serif;
	font-style: normal;
	margin-left: 60px;
}
.personaThumb {
    display: inline-block;
    width: 160px;
	height: 160px;
	box-shadow: 0px 5px;
    border-radius: 15px/5%;
}
.nameBoxPersona {
	-moz-transform: skew(3deg, 0deg);
	-webkit-transform: skew(3deg, 0deg);
	-o-transform: skew(3deg, 0deg);
	-ms-transform: skew(3deg, 0deg);
	transform: skew(3deg, 0deg);
	padding-bottom: 3px;
}
.textNamePersona {
	-moz-transform: skew(-3deg, 0deg);
	-webkit-transform: skew(-3deg, 0deg);
	-o-transform: skew(-3deg, 0deg);
	-ms-transform: skew(-3deg, 0deg);
	transform: skew(-3deg, 0deg);
    font-size: 1.5em;
	font-weight: bold;
	font-family: norwester, times new roman, sans-serif;
	z-index: 1;
}
.textNamePersonaBlack{
	border:solid 44px #000;
	position:absolute;
	margin:-68px 0 0 115px;
	transform: scaleX(3.8) scaleY(.5);
	z-index: -1;
}
.textNamePersonaWhite{
	border:solid 44px #fff;
	position:absolute;
	margin:-68px 0 0 115px;
	transform: scaleX(3.9) scaleY(.6);
	z-index: -2;
}
.personaNameArrow{
	border:solid 32px transparent;
	border-right-color:#000;
	position:absolute;
	margin:-26px 0 0 -88px;
	transform: scaleX(2) scaleY(.5);
}
.personaNameArrowShadow{
	border:solid 32px transparent;
	border-right-color:#fff;
	position:absolute;
	margin:-26px 0 0 -90px;
	transform: scaleX(2.2) scaleY(.7);
	z-index:-2;
}
.dialogueBoxPersona {
	border: 3px solid white;
	background-color: #000;
	padding-left: 19px;
	padding-right: 19px;
	margin-left: 3px;
	margin-top: -9px;
}

.choiceTextPersona {
	padding: 0px;
	margin: 0px;
	font-family: railway, times new roman, sans-serif;
	font-size: 1.3em;
	font-weight: normal;
}
.choiceTextPersona:hover{
}
.choiceFramePersona{
    background: #000000;
    color: #ffffff;
    padding: 15px;
    margin: 15px;
    transition: 0.25s;
    text-align: center;
	cursor: pointer;
	font-size:1.25rem;
	font-weight: bold;
    display: block;
    width: fit-content;
    max-width: 30vw;
    margin: 15px auto;
	border: solid 5px;
}

.choiceFramePersona:hover{
    background: #ffffff;
    color: #000000;
	border-color: #000000;
}

.textBoxPersona p.switch {
    color: #5fe6ec;
	cursor: pointer;
}
.textBoxPersona p.switch::before {
    content: '\027A4';
    padding-right: 5px;
	cursor: pointer;
}

.personaMenuButton {
	font-size: 1.2em;
	letter-spacing: .2em;
    background: #000000;
    color: #ffffff;
	border: solid 3px #ffffff;
    padding: 15px;
    margin: 15px;
	border: solid 3px #ffffff;
	border-radius: 0px;
    transition: 0.25s;
    text-align: center;
	cursor: pointer;
	-moz-transform: skew(5deg, 0deg);
	-webkit-transform: skew(5deg, 0deg);
	-o-transform: skew(5deg, 0deg);
	-ms-transform: skew(5deg, 0deg);
	transform: skew(5deg, 0deg);
}
.personaMenuButton:hover{
    background: rgba(0,0,0);
    filter:invert(1);
}
.pictureButtonPersona{
	letter-spacing: .2em;
	display: block;
	position: absolute;
    background: #000000;
    color: #ffffff;
	border: solid 3px #ffffff;
	font-size:1.25rem;
	font-weight: bold;
    display: block;
    width: fit-content;
    margin: 15px auto;
    padding: 15px;
    margin: 15px;
    border: 3px solid;
    transition: 0.25s;
    text-align: center;
	cursor: pointer;
	-moz-transform: skew(3deg, 0deg);
	-webkit-transform: skew(3deg, 0deg);
	-o-transform: skew(3deg, 0deg);
	-ms-transform: skew(3deg, 0deg);
	transform: skew(3deg, 0deg);
}
.pictureButtonPersona:hover {
    padding: 15px;
    background: #ffffff;
    color: #000000;
	border: solid 3px #000000;
}


#buttonMenu {
	display:inline-block;
}
/*Royalty Schema*/
/*Royalty Schema*/
.textBoxRoyalty {
	position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin: 5px 0;
    padding: 0px;
    width: 100%;
	overflow: visible;
}
img.textThumbRoyalty {
    height: 180px;
    width: 180px;
    /*box-shadow: -5px 5px var( --character-color);*/
    flex: none;  
	-webkit-filter:grayscale(0.9);
	filter: grayscale(0.9);
}
.textBoxContentRoyalty {
	font-size: 1.4em;
	font-family: railway, times new roman, sans-serif;
	font-style: normal;
	margin-left: 40px;
	margin-top: 5px;
	width: 90%;
}
.royaltyThumb {
    display: inline-block;
    width: 160px;
}
.nameBoxRoyalty {
	width:195px;
	background-color: #000;
	margin-top: -29px;
	border: 3px solid;
	border-radius: 5px;
	/*z-index:1;*/
	position: absolute;
}
.textNameRoyalty {
    font-size: 1.5em;
	font-family: marker, norwester, times new roman, sans-serif;
	z-index: 1;
	margin: auto;
	text-align: center;
}
.dialogueBoxRoyalty {
    width: 100%;
	border: 3px solid white;
	border-radius: 5px;
	background-color: #000;
	padding: 0px 15px;
}

.choiceTextRoyalty {
	padding: 0px;
	margin: 0px;
	font-family: railway, times new roman, sans-serif;
	font-size: 1.3em;
	font-weight: normal;
}
.choiceTextRoyalty:hover{
}
.choiceFrameRoyalty{
    background: #000000;
    color: #ffffff;
    padding: 15px;
    margin: 15px;
    transition: 0.25s;
    text-align: center;
	cursor: pointer;
	font-size:1.25rem;
	font-weight: bold;
    display: block;
    width: fit-content;
    max-width: 30vw;
    margin: 15px auto;
	border: solid 5px;
}

.choiceFrameRoyalty:hover{
    background: #ffffff;
    color: #000000;
	border-color: #000000;
}

.textBoxRoyalty p.switch {
    color: #5fe6ec;
	cursor: pointer;
}
.textBoxRoyalty p.switch::before {
    content: '\027A4';
    padding-right: 5px;
	cursor: pointer;
}

.royaltyMenuButton {
    background: #000000;
    color: #ffffff;
	border: solid 3px #ffffff;
    padding: 15px;
    margin: 15px;
	border: solid 3px #ffffff;
	border-radius: 0px;
    transition: 0.25s;
    text-align: center;
	cursor: pointer;
}
.royaltyMenuButton:hover{
    background: #ffffff;
    color: #000000;
	border: solid 3px #000000;
}
.pictureButtonRoyalty{
	display: block;
	position: absolute;
    background: #000000;
    color: #ffffff;
	border: solid 3px #ffffff;
	font-size:1.25rem;
	font-weight: bold;
    display: block;
    width: fit-content;
    margin: 15px auto;
    padding: 15px;
    margin: 15px;
    border: 3px solid;
    transition: 0.25s;
    text-align: center;
	cursor: pointer;
	-moz-transform: skew(3deg, 0deg);
	-webkit-transform: skew(3deg, 0deg);
	-o-transform: skew(3deg, 0deg);
	-ms-transform: skew(3deg, 0deg);
	transform: skew(3deg, 0deg);
}
.pictureButtonRoyalty:hover {
    padding: 15px;
    background: #ffffff;
    color: #000000;
	border: solid 3px #000000;
}

.flip-card {
  background-color: transparent;
  width: 100%;
  height: 100%;
  perspective: 1000px;
  color:white;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.flipping .flip-card-inner {
  transform: rotateY(180deg);
}

.board .cardStatBlock {
	font-size:2vw;
}

.cardStatBlock{
	font-size:3vw;
	position: absolute;
	top:0px;
	left:0px;
	height:100%;
	width:100%;
	z-index: 1;
	transition: transform 0.6s;
	filter: drop-shadow(-2px 2px 0 black) drop-shadow(2px 2px 0 black) drop-shadow(-2px -2px 0 black) drop-shadow(2px -2px 0 black);
	-webkit-filter: drop-shadow(-2px 2px 0 black) drop-shadow(2px 2px 0 black) drop-shadow(-2px -2px 0 black) drop-shadow(2px -2px 0 black);
}

.flipping .cardStatBlock {
	transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
	background: linear-gradient(306deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 9%, rgba(0,212,255,1) 100%); 
}

.flip-card-back { 
	background: linear-gradient(306deg, rgba(2,0,36,1) 0%, rgba(121,9,9,1) 13%, rgba(255,119,119,1) 100%); 
	transform: rotateY(180deg);
}

.shimmer {
  display:inline-block;
  -webkit-mask:linear-gradient(-60deg,#000 10%,#0005,#000 90%) right/1000% 100%;
  background-repeat: no-repeat;
  animation: shimmer 2.5s infinite;
  font-size: 50px;
}

@keyframes shimmer {
  100% {-webkit-mask-position:left}
}

.cardFrame {
	position:absolute; 
	top:0px; 
	left:0px; 
	width:100%;
	height:100%;
}

.hand{
	display:grid; 
	grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
#logbookGridHolder .flip-card-inner{
	height: 15vw; 
	width: 15vw;
}
#achievements p {
	width: 80%;
	margin-left: 20%;
}

.buttonGrid {
	display:grid;
	grid-template-columns:auto auto auto auto auto;
}
.galleryGrid {
	display:grid;
	grid-template-columns:repeat(3, auto);
}

.progressbar {
  background-color: black;
  border-radius: 13px;
  /* (height of inner div) / 2 + padding */
  padding: 3px;
}

.progressbar>div {
  background-color: orange;
  width: 40%;
  /* Adjust with JavaScript */
  height: 20px;
  border-radius: 10px;
}

.gridInventory {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(3, minmax(240px, .4fr));
}

.gridHolder {
	overflow:auto;
}

.phoneSelectionBox{
	position: relative;
	background-color: rgba(0,0,0,0.5);
	border-bottom: 5px solid;
	/* border-color: var(--character-color); */
	margin: 15px 0;
	padding: 15px;
	border-radius: 15px;
	width: 100%;
	overflow: hidden;
	box-shadow: inset 0 0 20px #000;
}

.phoneSelectionMenu {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fill, 150px);
	margin: 1.5rem;
}
.phoneSelectionMenu .textBox {
	padding: 0px;
	height: 200px;
	display: block;
	cursor: pointer;
	width: 150px;
  	border: 3px solid white;
}
.phoneSelectionMenu .textBox:hover {
	background: rgba(50,50,50,0.75);
    color: #ffffff;
    border-bottom: 3px solid #FFFFFF;
	cursor: pointer;
}
.phoneSelectionMenu .phoneTextThumb {
	position: relative;
  	display: block;
    margin: auto;
  	padding: 1px;
	width: 100%;
	height: 100%;
  	float: left;
	overflow: hidden;
  	margin: 0px 10px 0px 0px;
  	border: 3px solid white;
  	border-radius: 5px;
	height: 200px;
}
.selectionMenuText {
	margin: auto;
	border: none;
	font-size: 1.25rem;
	font-weight: bold;
	display: block;
	width: fit-content;
	text-align: center;
}
.phoneSelectionMenu .pictureButton, .phoneSelectionMenu .choiceText {
	margin: auto;
	border: none;
}
.phoneSelectionMenu .pictureButton, .choiceText:hover {
    padding: 15px;
    border: 0;
	opacity: 1;
}

#phoneGridHolder img.textThumb {
	border-radius: 0px;
	border: none;
	border-bottom: 3px solid white;
}
#phoneGridHolder .phoneSelectionMenu .textBox {
	color: black;
	border-radius: 15px;
	border-bottom: 3px solid white;
}

#logbookGridHolder .selectionMenuText {
	transform: skew(-15deg, -15deg);
	width: 145%;
	margin-top: -55px;
	margin-left: -20px;
	background: #000000A0;
	font-size: 1.5rem;
	height: 28px;
	text-shadow: 1px 1px #AAA;
}

#logbookGridHolder .phoneSelectionMenu img.textThumb {
	margin-right: 0px;
	margin-left: -30px;
	width: 200px;
	height: 200px;
}

.selectionMenuCrown {
	color: #FFFFFF;
	font-size: 2.5rem;
	position: absolute;
	bottom: 154px;
	/* background: black; */
	height: 39px;
	padding-top: 9px;
	border-radius: 15px;
	font-weight: bold;
	text-shadow: 2px 2px black;
}

.button3
{
  border-radius: 20px;
  padding: 10px 15px;
  color: #000;
  font-weight: bold;
  background: #AE8492;
  background: -moz-linear-gradient(top,  #AE8492 0%, #de93ac 70%, #AE8492 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#AE8492), color-stop(70%,#de93ac), color-stop(100%,#AE8492));
  background: -webkit-linear-gradient(top,  #AE8492 0%,#de93ac 70%,#AE8492 100%);
  background: -o-linear-gradient(top,  #AE8492 0%,#de93ac 70%,#AE8492 100%);
  background: -ms-linear-gradient(top,  #AE8492 0%,#de93ac 70%,#AE8492 100%);
  background: linear-gradient(to bottom,  #AE8492 0%,#de93ac 70%,#AE8492 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#AE8492', endColorstr='#AE8492',GradientType=0 );
}
.button3:active
{
  color: #000;
  background: #de93ac;
  background: -moz-linear-gradient(top,  #de93ac 0%, #de93ac 70%, #de93ac 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#de93ac), color-stop(70%,#de93ac), color-stop(100%,#de93ac));
  background: -webkit-linear-gradient(top,  #de93ac 0%,#de93ac 70%,#de93ac 100%);
  background: -o-linear-gradient(top,  #de93ac 0%,#de93ac 70%,#de93ac 100%);
  background: -ms-linear-gradient(top,  #de93ac 0%,#de93ac 70%,#de93ac 100%);
  background: linear-gradient(to bottom,  #de93ac 0%,#de93ac 70%,#de93ac 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#de93ac', endColorstr='#de93ac',GradientType=0 );
}

@-webkit-keyframes pulseBox {
  0% {-webkit-box-shadow: 0px 0px 10px 0px rgba(222, 147, 172, 0.6);}
  100% {-webkit-box-shadow: 0px 0px 18px 0px rgba(222, 147, 172, 0.9);}
}
@-moz-keyframes pulseBox {
  0% {-moz-box-shadow: 0px 0px 10px 0px rgba(222, 147, 172, 0.6);}
  100% {-moz-box-shadow: 0px 0px 18px 0px rgba(222, 147, 172, 0.9);}
}
@-o-keyframes pulseBox {
  0% {-o-box-shadow: 0px 0px 10px 0px rgba(222, 147, 172, 0.6);}
  100% {-o-box-shadow: 0px 0px 18px 0px rgba(222, 147, 172, 0.9);}
}
@keyframes pulseBox {
  0% {box-shadow: 0px 0px 10px 0px rgba(222, 147, 172, 0.6);}
  100% {box-shadow: 0px 0px 18px 0px rgba(222, 147, 172, 0.9);}
}

.pulseBox {
  -webkit-animation-name: pulseBox;
  -moz-animation-name: pulseBox;
  -o-animation-name: pulseBox;
  animation-name: pulseBox;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -moz-animation-direction: alternate;
  -o-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
  -o-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  border: 0px;
}

@-webkit-keyframes pulseText {
  0% {text-shadow: 0px 0px 8px rgba(222, 147, 172, 0.7);}
  100% {text-shadow: 0px 0px 22px rgba(222, 147, 172, 1);}
}
@-moz-keyframes pulseText {
  0% {text-shadow: 0px 0px 8px rgba(222, 147, 172, 0.7);}
  100% {text-shadow: 0px 0px 22px rgba(222, 147, 172, 1);}
}
@-o-keyframes pulseText {
  0% {text-shadow: 0px 0px 8px rgba(222, 147, 172, 0.7);}
  100% {text-shadow: 0px 0px 22px rgba(222, 147, 172, 1);}
}
@keyframes pulseText {
  0% {text-shadow: 0px 0px 8px rgba(222, 147, 172, 0.7);}
  100% {text-shadow: 0px 0px 22px rgba(222, 147, 172, 1);}
}

.pulseText {
  -webkit-animation-name: pulseText;
  -moz-animation-name: pulseText;
  -o-animation-name: pulseText;
  animation-name: pulseText;
  -webkit-animation-duration: 0.8s;
  -moz-animation-duration: 0.8s;
  -o-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -moz-animation-direction: alternate;
  -o-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
  -o-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  border: 0px;
}